import { Empty, Image as MyImage, List } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import $fetch from "../../../../utils/app/$fetch";

export default function ComponentTickets() {
  const navigate: any = useNavigate();
  const [ticketList, setTicketList] = useState([]);
  const [loading, setLoading] = useState<any>(true);

  useEffect(() => {
    initPage();
  }, []);

  useEffect(() => {
    if (ticketList?.length > 0) {
      ticketList.forEach((item: any) => {
        const img: any = new Image();
        img.src = item?.goodsPhoto;
      });
    }
  }, [ticketList]);

  const initPage = async () => {
    try {
      const res: any = await $fetch("ticketHolder/ticketHolderInf");
      setTicketList(res);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };

  const renderView = () => {
    if (loading) return null;
    if (!ticketList?.length) {
      return <Empty description="空空如也" />;
    }
    return (
      <ul className="that_tickets_list">
        {ticketList.map((item: any, index: any) => {
          return (
            <li
              className="public_wraper"
              key={item?.goodsId}
              onClick={() => {
                navigate("/tickets", { state: { goodsId: item?.goodsId } });
              }}
            >
              {/* 0是特典全，1是电切券 */}
              <div className="piblic_type">
                <div
                  className={`${
                    item?.ticketTemType === '0' ? "tedian" : "dianqie"
                  }`}
                >
                  {item?.ticketTemType === '0' ? "特典" : "电切"}
                </div>
              </div>
              <MyImage
                  src={item?.goodsPhoto}
                  fit="cover"
                  height="100%"
                  // width="4rem"
                  // height="4rem"
                  lazy={true}
                  placeholder={<MyImage src="" width="100%" height="3.89rem" />}
                />
              {/* <img src={item?.goodsPhoto} alt="" /> */}
              <div className="footer">
                <div className="ticket">
                  <h4>{item?.goodsName}</h4>
                  <div>使用期限:{item?.ticketTemVp}</div>
                </div>
                <div className="count">数量×{item?.quantity}</div>
              </div>
            </li>
          );
        })}
      </ul>
    );
  };

  return renderView();
}
